<template>
	<div class="xy_picker">
		<!-- 遮罩层 -->
		<div class="xy_picker_model" :class="flag ? '' : 'active'" @click="closeCurrentModel()"></div>

		<!-- 下拉 -->
		<div class="xy_picker_content">
			<!-- 选中展示 -->
			<div class="xy_picker_content_show" @click="openModel">
				<div class="xy_picker_content_current">
					{{ currentValue }}
				</div>
				<span class="xy_picker_content_icon" :class="flag ? '' : 'active'">
					<van-icon name="arrow-down" size="14" />
				</span>
			</div>

			<!-- 选择列表 -->
			<div class="xy_picker_current_list" v-if="isOpenModel" :class="flag ? 'active' : ''">
				<div class="xy_picker_null" v-if="column.length == 0">无数据</div>
				<div class="xy_picker_list" v-else>
					<div
						:value="selectValue"
						class="xy_picker_list_item"
						:class="item.active ? 'active' : ''"
						v-for="(item, index) in columnArr"
						:key="item.value"
						@click="currentItem(item, index)"
					>
						<span>{{ item.label }}</span>
						<span>
							<van-icon name="success" v-show="currentIndex === index" />
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'XyPicker',
	model: {
		prop: 'selectValue',
		event: 'switch'
	},
	props: {
		column: {
			type: Array,
			default: () => []
		},
		// 默认索引
		selectValue: {
			type: String | Number,
			default: ''
		}
	},
	watch: {
		// 实时更新数据与默认选项
		column(val) {
			this.columnArr = [];
			this.currentValue = '请选择';
			this.currentIndex = '';
			// 格式化选项组
			val.map((item, index) => {
				item.active = false;
				this.columnArr.push(item);
				if (item.value === this.selectValue) {
					this.currentIndex = index;
				}
			});

			if (this.selectValue && this.columnArr.length > 0) {
				// 默认选中
				this.currentValue = this.columnArr[this.currentIndex].label;
				this.columnArr[this.currentIndex].active = true;
			}
		},
		selectValue(val) {
			this.selectValue = val;
			this.init();
		}
	},
	data() {
		return {
			currentValue: '请选择', // 下拉展示的选中的值
			isOpenModel: false, // 是否打开下拉菜单
			flag: true, // 下拉动画旗帜
			currentIndex: '', // 选中的索引
			columnArr: [], // 下拉值
			type: 0 // 下拉菜单弹出方向的判断
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			this.columnArr = [];
			// 格式化选项组
			this.column.map((item, index) => {
				this.$set(item, 'active', false);
				this.columnArr.push(item);
				if (item.value == this.selectValue) {
					this.currentIndex = index;
				}
			});

			if (this.selectValue && this.columnArr.length > 0) {
				// 默认选中
				this.currentValue = this.columnArr[this.currentIndex].label;
				this.columnArr[this.currentIndex].active = true;
			}
		},
		// 遮罩层开启
		openModel(e) {
			var event = e || window.event;

			this.isOpenModel = true;
			this.flag = false;

			this.type = 0;

			// 不同的位置设置不同的弹出方向
			this.setDirection(event.x, event.y);
		},

		// 设置弹出方向
		setDirection(X, Y) {
			const DIV = document.querySelector('.xy_picker_content');
			const HEIGHT = window.innerHeight;
			const WIDTH = window.innerWidth;

			setTimeout(() => {
				const DIV_CONTENT = document.querySelector('.xy_picker_current_list');
				const HEIGHT_ = DIV_CONTENT.offsetHeight + 10;
				const WIDTH_ = DIV_CONTENT.offsetWidth + 10;

				if (HEIGHT - Y > HEIGHT_ && WIDTH - X < WIDTH_) {
					// 弹出宽度超过可视区
					this.type = 1;
				} else if (HEIGHT - Y < HEIGHT_ && WIDTH - X > WIDTH_) {
					// 弹出高度超过可视区
					this.type = 2;
				} else if (HEIGHT - Y < HEIGHT_ && WIDTH - X < WIDTH_) {
					// 弹出宽度、高度超过可视区
					this.type = 3;
				}

				if (this.type == 1) {
					DIV_CONTENT.style.left = -WIDTH_ + X + 20 + 'px';
					DIV_CONTENT.style.top = Y + 'px';
				} else if (this.type == 2) {
					DIV_CONTENT.style.top = -HEIGHT_ + Y + 10 + 'px';
					DIV_CONTENT.style.left = X + 'px';
				} else if (this.type == 3) {
					DIV_CONTENT.style.left = -WIDTH_ + X + 10 + 'px';
					DIV_CONTENT.style.top = -HEIGHT_ + Y + 10 + 'px';
				} else {
					DIV_CONTENT.style.left = X + 'px';
					DIV_CONTENT.style.top = Y + 'px';
				}
			});
		},

		// 遮罩层关闭
		closeCurrentModel() {
			if (this.isOpenModel) {
				this.flag = true;

				setTimeout(() => {
					this.isOpenModel = false;
				}, 200);
			} else {
				this.flag = false;
				this.isOpenModel = true;
			}
		},

		// 选择了一项
		currentItem(item, index) {
			this.closeCurrentModel();
			// 派发一个选中的事件
			this.$emit('switch', item.value);
		}
	}
};
</script>

<style lang="scss">
.xy_picker {
	display: inline-block;
	font-size: 16px;
	position: relative;

	.xy_picker_model.active {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 5;
		background-color: rgba(77, 77, 77, 0.7);
		width: 100vw;
		height: 100vh;
	}

	.xy_picker_current_list {
		position: fixed;
		z-index: 6;
		border-radius: 5px;
		background-color: #fff;
		left: 12px;
		top: 6px;
		animation: enter 0.2s;
		white-space: nowrap;
		max-width: 234px;
		box-shadow: 3px 5px 3px rgba($color: #b1afaf, $alpha: 0.3);
		max-height: 205px;
		overflow-y: scroll;
	}

	.xy_picker_list_item {
		font-size: 12px;
		color: #999;
		padding: 12px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			max-width: 165px;
			display: block;

			&:last-child {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 13px;
				padding-left: 30px;
				min-width: 15px;
				min-height: 15px;

				i {
					color: #3b82f6;
				}
			}
		}
	}

	.xy_picker_list {
		border-radius: 5px;
		overflow: hidden;
	}

	.xy_picker_list_item.active {
		background-color: #e8f2fe;
		color: #4185ec;
	}

	.xy_picker_current_list.active {
		animation: out 0.2s;
	}

	@keyframes enter {
		from {
			opacity: 0;
			transform: translate(-10px, -10px);
		}

		to {
			opacity: 1;
			transform: translate(0, 0);
		}
	}

	@keyframes out {
		from {
			opacity: 1;
			transform: translate(0, 0);
		}

		to {
			opacity: 0;
			transform: translate(-10px, -10px);
		}
	}

	.xy_picker_null {
		font-size: 12px;
		color: #999;
		padding: 10px;
	}

	.xy_picker_content_show {
		display: flex;
		font-size: 12px;
		color: #999;
		justify-content: space-between;
		align-items: center;
		padding: 2px 8px;
	}

	.xy_picker_content {
		position: relative;
	}

	.xy_picker_content_icon {
		margin-left: 5px;
		transition: transform 0.3s;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xy_picker_content_icon.active {
		transform: rotate(180deg);
	}
}
</style>